import React, { Component } from 'react';
import { routerRedux } from 'dva/router';
import { Flex, Stepper, Icon, Modal, Button, Toast } from 'antd-mobile';
import CanChangeScroll from '../../components/CanChangeScroll/CanChangeScroll';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import CollageGroupItem from './collageGroupItem';
import { spec_all, spec_model } from "./SpecAll.less";
import {group} from "../find/findIndex.less";
import {connect} from "dva";

class GroupList extends Component {
    constructor(props) {
        super(props);
        const {v,goodsDetailInfo} = this.props;
        this.state={
            D:"",
            ShowHour:"",
            M:"",
            S:"",
            now:goodsDetailInfo.nowTime,
            modal:false
        }
        const t1 = "";
    }


    CountTime=()=>{
        //获取当前时间
        const {smallGroupDetailList} = this.props;
        var now = this.state.now;
        //设置截止时间
        var end = smallGroupDetailList.endTime;
        var start = smallGroupDetailList.startTime;
        let seconds = start>now?parseInt((start - now) / 1000):parseInt((end - now) / 1000);
        // 总的小时数
        let h = Math.floor(seconds / 60 / 60);
        // 天数
        let d = parseInt(h / 24);
        // 显示的小时数
        let showHour = Math.floor(h - d * 24);
        let m = Math.floor((seconds - h * 60 * 60) / 60);
        let s = Math.floor((seconds - h * 60 * 60 - m * 60));
        if (seconds < 0) {
            m = '00';
            s = '00';
            d = '00';
            showHour = '00';
        }
        this.setState({
            D:d,
            ShowHour:showHour,
            M:m,
            S:s,
            now:now+1000
        })
    };
    showModal = (v) => {
        this.setState({
            modal: true,
        });
        console.log(111)
        this.props.dispatch({type:"goodsDetail/smallGroupDetailEFF",obj:{id:v.groupId}}).then(result=>{
            this.t1 = setInterval(this.CountTime, 1000, 1000);
            this.CountTime();
        })
    };
    onClose = () => {
        this.setState({
            modal: false,
        });
        clearInterval(this.t1)
        // this.props.dispatch({type:"goodsDetail/clearState"})
    };
    render() {
        const {goodsDetailInfo,smallGroupDetailList} = this.props;
        const {collageGroup} = goodsDetailInfo;
        const {D,ShowHour,M,S}=this.state;
        return (
            <Flex className={spec_all} justify="between" direction="column">
                <Flex className="select_spec" align="center" style={{width:'100%',marginBottom:".39rem"}}>
                    <Flex style={{flex:  1}}>
                        <div style={{ color:'#666', whiteSpace:"nowrap", marginRight:"0.2rem" }}>
                            <span style={{color:"#FE0A3E"}}>{collageGroup.openingGroupNum }</span>
                            <span>个人正在拼团，您可直接参团</span>
                        </div>
                    </Flex>
                </Flex>
                {collageGroup.list.map((v,i)=>{
                    return <div key={i} style={{width:"100%"}}>
                        <CollageGroupItem v={v} showModal={this.showModal} open={this.props.open} smallGroupDetailList={smallGroupDetailList} goodsDetailInfo={goodsDetailInfo}  length={collageGroup.list.length}></CollageGroupItem>
                        <Modal
                            visible={this.state.modal}
                            transparent
                            className={group}
                            maskClosable={true}
                            onClose={this.onClose}
                            title={
                                <Flex justify="center">
                                    <div style={{marginRight:".1rem"}}>
                                        还差 <span style={{color:"#fff"}}>{smallGroupDetailList.surplusNum}人</span>
                                    </div>
                                    <div>
                                        剩余
                                        <span style={{color:"#fff"}}>{ShowHour<10?"0"+ShowHour:ShowHour}</span>:
                                        <span style={{color:"#fff"}}>{M<10?"0"+M:M}</span>:
                                        <span style={{color:"#fff"}}>{S<10?"0"+S:S}</span>
                                    </div>
                                </Flex>
                            }
                        >
                            <Flex justify="around" style={{width:"100%",margin:".7rem 0"}}>
                                {smallGroupDetailList.list&&smallGroupDetailList.list.map((v,i)=>{
                                    return <div key={i} style={{textAlign:"center"}}>
                                        <div style={{width:".7rem",height:".7rem",borderRadius:"100%",margin:".2rem auto"}}>
                                            <NoLazyImg src={v.memberAvatar } style={{width:".7rem",height:".7rem",borderRadius:"100%"}}></NoLazyImg>
                                        </div>
                                        <div>{v.memberName }</div>
                                    </div>
                                })}
                                {[...Array(smallGroupDetailList.surplusNum)].map((a,b)=>{
                                    return <div key={b} style={{textAlign:"center"}}>
                                        <Flex justify="center" style={{width:".7rem",height:".7rem",borderRadius:"100%",background:"#DDDDDD",color:"#666"}}>?</Flex>
                                        <div style={{opacity:"0"}}>111</div>
                                    </div>
                                })}
                            </Flex>
                            <div style={{width:"50%",margin:"auto",background:"#FE0A3E",color:"#fff",borderRadius:".3rem",padding:".1rem .15rem"}} onClick={()=>{
                                this.props.open(true,2,3);
                                this.onClose();
                            }}>立即参与</div>
                        </Modal>
                    </div>

                })}

            </Flex>
        );
    }
}

export default connect(({ goodsDetail }) => ({ goodsDetail }))(GroupList);
